<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>腾飞健康管理平台</title>
    <link rel="stylesheet" href="lib/layui/css/layui.css">
</head>
<body>
<table id="examinerPermsTable" lay-filter="examinerPermsTable"></table>

<script type="text/javascript" src="lib/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(["form", "jquery", "layer", "table", "laytpl"], function () {
        let $ = layui.jquery;
        let layer = layui.layer;
        let form = layui.form;
        let table = layui.table;
        let laytpl=layui.laytpl;


        laytpl.getRoleByExaminerId = function (examinerId) {
            let rolesName="";
            $.ajax({
                url: "/getRoleByExaminerId",
                dataType: "json",
                type: "get",
                data: "examinerId=" + examinerId,
                async: false,
                success: function (responseData) {
                    console.log(responseData);
                    for(let i=0; i<responseData.length; i++){
                        rolesName=rolesName+responseData[i].roleName+"，";
                    }
                },
                error: function () {
                    console.log("根据员工id获取角色信息失败！");
                }
            });
            return rolesName;
        };

        let roleTable = table.render({
            elem: "#examinerPermsTable",
            id: "examinerPermsTableId",
            url: "/getExaminers",
            page: false,
            limit: 5,
            limits: [5, 10, 15],
            method: "post",
            size: "sm",
            toolbar: false,
            response: {
                countName: "totalCount",
                dataName: "data",
                msgName: "msg",
            },
            request: {
                pageName: "currentPageNum",
                limitName: "pageSize",
            },
            cols: [
                [
                    {type: "checkbox", fixed: "left", align: "center"},
                    {field: "examinerId", title: "账号", width: 150, align: "center"},
                    {field: "examinerName", title: "姓名", width: 150, align: "center"},
                    {field: "roleName", title: "角色", width: 650, align: "center", templet: "#roleTpl"},
                    {title: "操作", fixed: "right", templet: "#operateTemplete", align: "center"}
                ]
            ]
        });

        table.on("tool(examinerPermsTable)", function(obj){
            switch (obj.event) {
                case "edit":
                    edit(obj.data);
                    break;
            }
        });

        function edit(data){
            layer.open({
                title: "分配角色",
                type: 2,
                maxmin: true,                //最大化最小化
                shade: 0.5,
                anim: 0,                     //弹出动画
                area: ["90%", "90%"],
                content: "/apportionRole?examinerId="+data.examinerId+"&examinerName="+data.examinerName,
                zIndex: layer.zIndex,
                success: null,
                end: function () {
                    roleTable.reload();
                },
            });
        }


    });
</script>
<script type="text/html" id="operateTemplete">
    <div class="layui-btn-container">
        <span class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"
              style="padding-right: 5px;margin-right: 5px">编辑</span>
    </div>
</script>
<script type="text/html" id="roleTpl">
    <span>{{ layui.laytpl.getRoleByExaminerId(d.examinerId) }}</span>
</script>
</body>
</html>